<template>
  <div class="playlist-detail">
    <!-- 歌单图片 -->
    <div class="detail-img">
      <img class="img" :src="coverPic" alt="图片显示失败" />
    </div>
    <!-- 歌单详情 -->
    <div class="detail-text">
      <h2 class="title" style="color: #333">歌手信息</h2>
      <p class="detail">{{ songerDec }}</p>
      <p>
        <button class="icon-btn"><i class="iconfont icon-bianji"></i></button>
        <button class="icon-btn"><i class="iconfont icon-31shezhi"></i></button>
        <button class="icon-btn"><i class="iconfont icon-loudou"></i></button>
      </p>
    </div>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { GetArtistDesc } from "../api/request.js";
import emitter from "../bus/index.js";

export default {
  name: "PlayListDetail",
  setup() {
    let songerDec = ref(""); //歌手信息
    let coverPic = ref(""); //封面

    //获取歌手详细信息
    //#region
    // GetArtistDesc("artist/desc", 3684).then((res) => {
    //   // console.log(res.data);
    //   songerDec.value = res.data.briefDesc;
    //   coverPic.value = res.data.topicData[0].coverUrl;
    // });
    //#endregion

    // async/await 获取数据
    //点击获取歌手详细信息
    emitter.on("sendId", async (id) => {
      let res = await GetArtistDesc("artist/desc", id);
      songerDec.value = res.data.briefDesc;
      coverPic.value = res.data.topicData[0].coverUrl;
    });
    return {
      songerDec,
      coverPic,
    };
  },
};
</script>

<style scoped>
.playlist-detail {
  display: flex;
  padding: 15px 40px;
  position: fixed;
  background: #fff;
  top: 0vh;
  border-radius: 15px;
  z-index: 1000;
}
.detail-img {
  height: 200px;
  width: 200px;
  border-radius: 20px;
}
.detail-img .img {
  height: 200px;
  width: 200px;
}

.detail-text {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  /* justify-content: space-between; */
}
.detail-text .detail {
  margin-top: 10px;
  color: #777;
  font-size: 13px;
  /* 多行文本溢出隐藏，省略号代替 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical; /*设置对齐模式*/
  -webkit-line-clamp: 5;
}
.detail-text .icon-btn {
  height: 32px;
  width: 32px;
  border: none;
  margin: 0 8px;
  margin-top: 35px;
  border-radius: 5px;
  cursor: pointer;
}
.detail-text .icon-btn:hover {
  background: rgba(31, 210, 168, 0.8);
  color: #fff;
}
</style>